Как сделать чтобы при hover над картинкой появлялся блок?

[Temik2704]

Господа,я новичок,поэтому сильно ногами не бейте.

Задание:

Сделать список мультфильмов как показано на картинке:

Т.е. при наведении мышки над картинкой появляется еще год в правом верхнем углу,и полное название мультфильма на русском и англ.

Мой код:

http://cssdesk.com/vN3W8

Не понимаю как сделать так чтобы при наведении над картинкой отобразился блок с годом

или блок с полным именем мультфильма,при этом блок только с русским названием мультфильма - исчезал.

Понимаю что делать надо через hover - но как,подскажите?

Да и вообще прокомментируйте пожалуйста код.Мне кажется что я очень сильно тут намудрил.

Заранее спасибо!

[by chris]

http://jsfiddle.net/7Lfbv/

[chocolate_moles]

еще вариант http://jsfiddle.net/7Lfbv/1/

+гуглите "css captions"

Edited October 16, 2013 by chocolate_moles

[Temik2704]

Извините,забыл сказать что условием было сделать это через <ul> <li>,мне подсказали что ключевые блоки должны выглядеть вот так:

<a href="#">

<span class="date">2011</span>

<img src="" alt="" />

<span class="1-element"></span>

<span class="2-element"></span>

</a>

Но у меня получается не совсем то.

Мой пример

1.Как сделать так чтобы от первой картинке до границы слева не было такого большого простанства?

2.Почему при заданном ul li relative тег span с абсолютным позиционированием не хочет нормально работать?1-element отображается как простой текст без фона,хотя он задан.

3.Как сделать так чтобы позиционирование date было задано абсолютно относительно картинки?(непонятно относительно чего он позиционируется.Хотя вроде как ul li выставлено relative.Я не могу задать ему с помощью команд top:0 right:0 чтобы он был в верх-правом углу картинки.)Задать тегу Li ширину и высоту картинки?Пробовал,не получается.

[Bassline]

1. Название классов не должны начинаться с цифр (такие классы поддерживает только IE). Таким образом, из-за цифр в начале, на спаны не действует ни одно из правил, вообще. Замените класс 1-element на любой другой и все заработает (появится фон, позиционирование и т.д.)

2. Тегу li задан display:inline и ширина с высотой Вы в курсе, что высота и ширина действует только на блочные элементы и строчно-блочные?

3. И так далее...

Edited October 17, 2013 by Bassline

[Temik2704]

1. Название классов не должны начинаться с цифр (такие классы поддерживает только IE). Таким образом, из-за цифр в начале, на спаны не действует ни одно из правил, вообще. Замените класс 1-element на любой другой и все заработает (появится фон, позиционирование и т.д.)

2. Тегу li задан display:inline и ширина с высотой Вы в курсе, что высота и ширина действует только на блочные элементы и строчно-блочные?

3. И так далее...

http://cssdesk.com/L9hvR

И все равно непонятно,относительно чего позиционируется span.Должен относительно li.А получается непонятно от чего.Например почему при задании команд top:0 right:0 блок date не отображается в правом верхнем углу картинки?

И вообще почему перестал при наведении отображаться дата и 2ой элемент?

Помогите пожалуйста.

P.s.Промежуток слева остается.+ какие-то непонятные черточки между картинками.

Edited October 17, 2013 by Temik2704

[Bassline]

И все равно непонятно,относительно чего позиционируется span.

Относительно li он и позиционируется. Но, повторюсь, тегу li задан display:inline, а это значит, что тег стал строчным, то есть его высота сейчас равна высоте шрифта, а не, например, картинки. Вот и подумайте, относительно чего сейчас позиционируется span.

[Temik2704]

И все равно непонятно,относительно чего позиционируется span.

Относительно li он и позиционируется. Но, повторюсь, тегу li задан display:inline, а это значит, что тег стал строчным, то есть его высота сейчас равна высоте шрифта, а не, например, картинки. Вот и подумайте, относительно чего сейчас позиционируется span.

Получается относительно пустой строки?Как можно задать span чтобы он позиционировался относительно картинки?Убрать inline и воспользоваться float?

И про промежуток слева который висит и не убирается margin`ом - скажите пожалуйста,отчего он появился?

Edited October 17, 2013 by Temik2704

[Bassline]

И про промежуток слева который висит и не убирается margin`ом - скажите пожалуйста,отчего он появился?

Это не margin, а padding. Вы маркеры скрыли, а промежуток, который для них отводился, остался.

p.s.

Поставьте плагин Firebag на Firefox, научитесь им пользоваться, и тогда всех этих вопросов не будет возникать.

Edited October 17, 2013 by Bassline

[Temik2704]

И про промежуток слева который висит и не убирается margin`ом - скажите пожалуйста,отчего он появился?

Это не margin, а padding. Вы маркеры скрыли, а промежуток, который для них отводился, остался.

p.s.

Поставьте плагин Firebag на Firefox, научитесь им пользоваться, и тогда всех этих вопросов не будет возникать.

Вроде со всем разобрался,остался только маленький штришок.

http://cssdesk.com/L9hvR

Почему теперь расстояние от левой картинки до левого края меньше чем от правой картинки до правого края?

P.s.Спасибо что помогает новичку!

[Bassline]

Почему теперь расстояние от левой картинки до левого края меньше чем от правой картинки до правого края?

Потому, что не закрыт тег li у последнего пункта <li></li>

[spdif]

Почему теперь расстояние от левой картинки до левого края меньше чем от правой картинки до правого края?

добавьте

.parent ul {padding-left: 2px;}

Потому, что не закрыт тег li у последнего пункта

вообще у всех li не был закрыт!!!

Edited October 17, 2013 by spdif

[Temik2704]

Всем большое спасибо!Пойду учиться дальше!